<div class="container">
    <div class="col-md-9 col-md-offset-1 bg-info training_panel" *ngFor="let trainingDetail of list_trainingDetail">
        <div class="trainings-name">{{trainingDetail.trainings.name}}</div>
        <div class="row extra-bottom-padding">
            <div class="col-md-2 title">Status</div>
            <div class="col-md-6 mb-2">
                <div [ngSwitch]="trainingDetail.trainings.trainingsStatus">
                    <div *ngSwitchCase="1">Proposed</div>
                    <div *ngSwitchCase="2">Confirmed Proposals</div>
                    <div *ngSwitchCase="3">Rejected Proposals</div>
                    <div *ngSwitchCase="4">Training In Progress</div>
                    <div *ngSwitchCase="5">Completed</div>
                </div>
            </div>
        </div>
        <div class="row extra-bottom-padding">
            <div class="col-md-2 title">Progress</div>
            <div class="col-md-6 mb-2">
                <progressbar [value]="trainingDetail.trainings.progress" type="warning" [striped]="true" [animate]="true">{{ trainingDetail.trainings.progress + '%'}}</progressbar>
            </div>
            <div class="col-md-4" *ngIf="trainingDetail.trainings.progress!=100">
                <div class="btn-group" dropdown>
                    <button id="button-autoclose1" dropdownToggle type="button" class="btn btn-warning btn-xs dropdown-toggle" aria-controls="dropdown-autoclose1">
                         Set Progress <span class="caret"></span>
                    </button>
                    <ul id="dropdown-autoclose1" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-autoclose1">
                        <li role="menuitem"><a class="dropdown-item" href="javascript:void(0);" (click)="trainingDetail.trainings.progress=25;mark(trainingDetail.trainings)">25%</a></li>
                        <li role="menuitem"><a class="dropdown-item" href="javascript:void(0);" (click)="trainingDetail.trainings.progress=50;mark(trainingDetail.trainings)">50%</a></li>
                        <li role="menuitem"><a class="dropdown-item" href="javascript:void(0);" (click)="trainingDetail.trainings.progress=75;mark(trainingDetail.trainings)">75%</a></li>
                        <li role="menuitem"><a class="dropdown-item" href="javascript:void(0);" (click)="trainingDetail.trainings.progress=100;mark(trainingDetail.trainings)">100%</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row extra-bottom-padding" *ngIf="trainingDetail.trainings.progress==100">
            <div class="col-md-2 title">Rate</div>
            <div class="col-md-6 mb-2">
                <rating [max]="10" [(ngModel)]="trainingDetail.trainings.rate" [customTemplate]="rate" (click)="confirmSelection(trainingDetail.trainings)"></rating>

                <div> <b>(<i>Rate:</i> {{trainingDetail.trainings.rate}})</b> </div>

                <ng-template #rate let-i="index" let-v="value">
                    <button class="btn btn-{{i < v ? 'warning' : 'default'}}">
                    {{i < v ? '&#9733;' : '&#9734;'}}
                  </button>
                </ng-template>
            </div>
        </div>

        <div class="row extra-bottom-padding">
            <button type="button" class="btn btn-primary detail_button" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic"> Detail <span class="caret"></span></button>
        </div>

        <!-- <hr> -->
        <div id="collapseBasic" [collapse]="isCollapsed" [isAnimated]="true">
            <div class="col-md-7 row extra-bottom-padding">
                <div class="user-name">{{trainingDetail.mentor.name}}</div>
                <div class="row">
                    <span class="title col-md-6">Profile:</span>
                    <div class="user-detail col-md-4"> {{trainingDetail.mentor.profile}}</div>
                </div>
                <div class="row">
                    <span class="title col-md-6">Facilities:</span>
                    <div class="user-detail col-md-4"> {{trainingDetail.mentor.facilities}}</div>
                </div>
                <div class="row">
                    <span class="title col-md-6">Years of experience:</span>
                    <div class="user-detail col-md-4"> {{trainingDetail.mentor.numOfYears}}</div>
                </div>
                <div class="row">
                    <span class="title col-md-6">No. of trainings delivered:</span>
                    <div class="user-detail col-md-4"> 1 </div>
                </div>
                <div class="row">
                    <span class="title col-md-6">Fee charged:</span>
                    <div class="user-detail col-md-4"> $ 83.5 </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class="row extra-bottom-padding">
                    <span class="title col-md-5">Skills</span>
                </div>
                <div class="row extra-bottom-padding">
                    <button type="button" class="btn btn-warning skillbtn" *ngFor="let selectedOption of trainingDetail.listMentorSkills">{{selectedOption.name}}</button>
                </div>
                <hr>
                <div class="row extra-bottom-padding">
                    <span class="title col-md-5">Calendar</span>
                </div>
                <div class="row extra-bottom-padding">
                    <span class="calendar">{{trainingDetail.mentorCalendar.startDate}} - {{trainingDetail.mentorCalendar.endDate}}</span>
                </div>
            </div>
        </div>
    </div>
</div>